<!--  -->
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="companyName" label="姓名" sortable>
      </el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img
            :src="scope.row.staffPhoto"
            slot="reference"
            v-imageerror="require('@/assets/common/bigUserHeader.png')"
            @click="showQrCode(scope.row.staffPhoto)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="mobile" sortable label="手机号"> </el-table-column>
      <el-table-column prop="workNumber" sortable label="工号">
      </el-table-column>
      <el-table-column label="聘用形式" sortable prop="formOfEmployment">
        <template slot-scope="scope">
          <span>{{ scope.row.formOfEmployment == 1 ? "正式" : "未知" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="departmentName" sortable label="部门">
      </el-table-column>
      <el-table-column prop="timeOfEntry" sortable label="入职时间">
        <template slot-scope="scope">
          {{ scope.row.timeOfEntry | timeDate }}
        </template>
      </el-table-column>
      <el-table-column prop="enableState" sortable label="账户状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enableState"
            @change="handleSwitch(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column sortable label="操作" width="280px">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="$router.push('/employees/detail/' + scope.row.id)"
            >查看</el-button
          >
          <el-button type="text" size="small">转正</el-button>
          <el-button type="text" size="small">调岗</el-button>
          <el-button type="text" size="small">离职</el-button>
          <el-button
            type="text"
            size="small"
            @click="handleDialog(scope.row.id)"
            >角色</el-button
          >
          <el-button type="text" disabled size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      layout="prev, pager, next"
      :total="total"
      @current-change="handleChange"
    >
    </el-pagination>

    <!-- 模态框的封装组件 -->
    <rule-dialog
      :ruleDialog="ruleDialog"
      :roleIds="roleIds"
      :userId="userId"
      @changeDialog="changeDialog"
    ></rule-dialog>

    <!-- 显示二维码 -->
    <el-dialog
      title="二维码"
      :visible.sync="showCodeDialog"
      @close="imgUrl = ''"
    >
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import RuleDialog from "./RuleDialog.vue";
import { getUserDetailById } from "@/api/user";
// 转换为二维码的做法
import QrCode from 'qrcode'
export default {
  name: "Com",
  data() {
    return {
      //开关
      value: "",
      // 模态框
      ruleDialog: false,
      id: "",
      roleIds: [],
      userId: "", //员工id

      // 显示二维码的模态框
      showCodeDialog: false,
    };
  },
  props: ["tableData", "total", "page", "size"],

  components: { RuleDialog },

  computed: {},

  mounted() {},

  methods: {
    // 分页
    handleChange(val) {
      this.$emit("handleChange", val);
    },

    // 更改状态
    handleSwitch(row) {
      let find = this.tableData.findIndex((item) => {
        item.id == row.id;
      });

      this.tableData[find].enableState = row.enableState;
    },

    // 打开模态框
    handleDialog(id) {
      this.id = id;
      this.userId = id;
      this.ruleDialog = true;
      this.getDetailsRoles();
    },
    async getDetailsRoles() {
      let { roleIds } = await getUserDetailById(this.id);
      // console.log(res, "radioIdsassdasdasd");
      this.roleIds = roleIds;
    },

    // 关闭模态框
    changeDialog() {
      this.ruleDialog = false;
    },

 

    // 显示二维码的模态框！！！挺重要的，记一下
    showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true; // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url); // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        });
      } else {
        this.$message.warning("该用户还未上传头像");
      }
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style scoped>
img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
